{% extends 'base.html' %}
{% load static %}
{% load myfilter %}
{% block title %}交流区-四象生八卦{% endblock %}
{% block style %}
<link rel="stylesheet" href="{% static 'blog/css/base.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/base_bar.css' %}">
{% endblock %}
{% block script %}
<!-- base_bar迁移至index -->
{% endblock %}
{% block body %}
<header>
    <div class="header-left">
        {% block header-button %}
        <button type="button" id="btn-suggesstion">意见征集</button>
        <button type="button" id="btn-change">变更记录</button>
        <button type="button" id="btn-about">关于本站</button>
        <button type="button" id="btn-plan">投票情况</button>
        {% endblock %}
    </div>
    <div class="header-logo">交流区</div>
    <div class="header-right">
        <div></div>
        <div>
            {% if user.is_authenticated %}
            <a href="{% url 'account:logoutBBS' %}">退出登录</a>
            {% else %}
            <a href="{% url 'account:login' %}">登录</a>
            <a href="{% url 'account:registry' %}">注册</a>
            {% endif %}
        </div>
    </div>
</header>
<nav>{% block nav %}
    <div></div><div></div>
    <ul>
        {% block nav-li %}
        <li><a href="{% url 'blog:index' %}">交流区</a></li><i class="fa fa-chevron-right" aria-hidden="true"></i>
        {% endblock %}
    </ul>
{% endblock %}</nav>
<main>{% block main %}{% endblock %}</main>
<footer><span>Copyright@2020  四象生八卦</span></footer>

<!-- bar相关 -->
<section id="bar-suggestion">
    <h3><i class="fa fa-envelope-o" aria-hidden="true"></i>意见征集、高质量需求</h3>
    <p>在这里，您可以提出对本站的改进意见，如对本站的布局、色彩、功能等提出相关意见。同时，也可以在此处写下您的高质量需求，需求将通过大众投票决定是否实现，投票的标准由大伙儿讨论决定。</p>
    <p>您的意见和需求，将对本站的建设起到决定性作用。</p>
    {% if user.is_authenticated %}
    <div>
        <form method="post">
            {% csrf_token %}
            <label for="suggestion"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>意见和需求</label><button>提交</button>
            <textarea name="suggestion" id="suggestion" required></textarea>
        </form>
    </div>
    {% else %}
    <p>如果您要提出宝贵的意见，请先登录本站<a href="{% url 'account:login' %}">（去登陆）</a>。登录成功后，正下方会显示评论区和提交按钮。</p>
    {% endif %}
</section>
<section id="bar-change">
    <h3><i class="fa fa-phone" aria-hidden="true"></i>变更记录</h3>
    <p>在这里，您可以看到本站每一次大大小小的改变。</p>
    <div>
        {% for change in changes %}
        <p><i class="fa fa-history" aria-hidden="true"></i><span>{{ change.create_time|date:"Y年m月d日" }}</span>：<span>{{ change.content }}</span></p>
        {% endfor %}
    </div>
</section>
<section id="bar-about">
    <h3><i class="fa fa-address-card-o" aria-hidden="true"></i>关于本站</h3>
    <p>交流区主要是用作<a href="{% url 'docs:index' %}">接口文档</a>的补充。关于一些说明，已在<a href="{% url 'docs:index' %}">接口文档</a>的&nbsp;关于本站&nbsp;中陈述，这里便不再复述。</p>
    <p>交流区的主要功能是提供接口的使用范例，另外用作与使用者互动，以便增强网站的交互性和易用性。</p>
    <p>本区接收来自任何合法用户的意见与需求，并在力所能及的范围内给予帮助。</p>
    <p><span class="important">重要！！！</span><span class="underline">本站暂时不提供除了本站外的其它线上交流场所，所以暂时不存在与本站相关的QQ群、微信群等。若日后有交流群的开放，将会在公告中予以公示，若未公示，则类似的交流群必定另有所图，望本站的使用者谨慎对待！！！</span></p>
    <p>最后，愿我们共同成长，共同坚持那&nbsp;“缥缈”&nbsp;的梦想。</p>
</section>
<section id="bar-plan">
    <h3><i class="fa fa-envelope-open-o" aria-hidden="true"></i>投票情况</h3>
    <p>下面的投票规则由我暂时拟定。（后期讨论决定）</p>
    <p>为了言论安全和自由，这里的每条建议均会经过人工筛选，并从其中挑出三条（特殊情况下，可以更多）我认为合理、可行的建议。</p>
    <p>由一切合法<a href="{% url 'account:registry' %}">注册</a>用户参与投票，每人可对每条建议进行投票，每条建议每人最多只可投一票</p>
    <p>票数最高的建议将由我或者我认为可行的人实现。</p>
    <p>若三者（n者）票数相同，将由我随机挑选一个我认为最有可能实现的建议。</p>
    <p>实现后的功能将在<a href="{% url 'docs:index' %}" target="_blank">文档中心</a>展示，并配写相关的使用文档。</p>
    <p>正常为一个月一期，后面会根据网站的发展情况和我自身的时间分配适当减短投票周期。</p>
    {% if user.is_authenticated %}
    <div>
        {% for s in vote_suggests %}
        <div>
            <p><i class="fa fa-bookmark-o" aria-hidden="true"></i>{{ s.content }}</p>
            <button data-spk="{{ s.pk }}" id="btn-star">
                {% if user.votes|judgeVote:s %}
                <i class="fa fa-star" aria-hidden="true">{{ s.votes }}</i>
                {% else %}
                <i class="fa fa-star-o" aria-hidden="true">{{ s.votes }}</i>
                {% endif %}
            </button>
        </div>
        {% empty %}
        <div>
            <p><i class="fa fa-bookmark-o" aria-hidden="true"></i>暂无待投票的建议</p>
            <button></button>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p><a href="{% url 'account:login' %}">登陆</a> 后，方可查看正下方投票的详细信息。</p>
    {% endif %}
</section>
{% block body-other %}{% endblock %}
{% endblock %}
